<style scoped>
.phone {
  background-color: #f1f1f1;
  padding-right: 20px;
  position: relative;
}
.phoneBox {
  overflow: hidden;
  background-color: #fff;
  border-radius: 50px;

  height: 810px;
}
.phonewrap {
  height: 810px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: -20px;
}
.phoneBottom {
  position: absolute;
  left: 0;
  right: 20px;
  bottom: 0;
  background: #fff;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}
.phoneNav img {
  display: block;
  width: 100%;
}
.liuhai {
  position: absolute;
  width: 60%;
  left: 20%;
  top: 0;
  height: 40px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  background-color: #fff;
  z-index: 50;
  border: 1px solid #f0f3f8;
}
.addSlide {
  display: flex;
  display: -webkit-flex;
  margin: 0 5px;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.slideLeft,
.slideRight {
  width: 50%;
  box-sizing: border-box;
}
.slide {
  padding: 0 5px;
  position: relative;
}
.slide1 .img {
  height: 120px;
}
.slide2 .img,
.slide5 .img {
  /* padding-left: 5px; */
  height: 135px;
}
.slide3 .img,
.slide4 .img {
  /* padding-left: 5px; */
  height: 150px;
}
.slide3,
.slide4 {
  width: 50%;
  margin-top: 5px;
  box-sizing: border-box;
  display: inline-block;
  float: left;
}
.slide3 {
  /* padding-right: 5px; */
}
.slide4 {
  /* padding-left: 5px; */
}
.slide5 {
  margin-top: 5px;
  box-sizing: border-box;
  display: inline-block;
}
.img {
  width: 100%;
  border-radius: 3px;
}
.resetBtn {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  text-align: center;
  top: 0;
  left: 5px;
  right: 5px;
  padding: 5px 0;
  height: auto;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
}
.hot {
  margin-bottom: 50px;
  background-color: #f0f0f0;
}
.insure-list {
  border-bottom: 1px solid #f4f4f4;
}
.hotTitle {
  margin-top: 10px;
  margin-bottom: 5px;
  /* background-color: #EEE; */
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  border-top: 1px solid #eee;
}
.hotList {
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
}
.xianzhong {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  overflow: hidden;
}
.xianImg {
  text-align: center;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
}
.insure-tag {
  vertical-align: middle;
  line-height: normal;
  padding: 3px 5px;
  color: #fff;
  border-radius: 3px;
}
.bgyellow {
  background-color: #ff9e2b;
}
.bggreen {
  background-color: #2db644;
}
.content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 25px;
  line-height: 25px;
  color: #757677;
}
.center {
  text-align: center;
  color: #6c6c6c;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #eee;
}
.center.active {
  color: #5ba4e9;
}
.wraper {
  padding: 0 20px;
  margin-bottom: 30px;
}

.search {
  padding-bottom: 20px;
}

.search span {
  color: #68777c;
  font-weight: bold;
  padding-right: 18px;
}

.search button {
  background-color: #00a8f7;
  color: #fff;
  margin-left: 8px;
}

.top {
  margin-bottom: 20px;
  border-top: 1px dashed #cccccc;
}

.wraper .headline {
  position: relative;
  font-size: 12px;
  color: #303134;
  font-weight: bold;
  margin: 10px 0;
  line-height: 32px;
}

.wraper .add-agent {
  position: absolute;
  top: 0px;
  right: 30px;
  background-color: #348bf2;
  color: #fff;
}

.iconfont {
  font-size: 14px;
}

.red-font {
  color: #ff1f1f;
}

.fixed-bottom {
  position: absolute;
  bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
  height: 80px;
  line-height: normal !important;
  /* left: 210px; */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  text-align: center;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.sidehide {
  left: 75px;
}

/* 表格样式 start*/

.pro-card {
  margin-bottom: 10px;
}

.pro-card-head {
  background-color: #e6e7eb;
  line-height: 38px;
  border: 1px solid #ddd;
}

.pro-card-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  padding-left: 20px;
}

.pro-card-headr {
  padding-right: 10px;
  text-align: right;
}

.pro-card-content {
  clear: both;
}

.pro-paramname {
  text-align: center;
  background-color: #e6e7eb;
  font-size: 14px;
  color: #333;
  border-right: 1px solid #ddd;
}

.pro-paramvalue {
  padding-left: 10px;
  border-right: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pro-card-contentrow {
  line-height: 40px;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* 表格样式  end */

/* 分页 start */

.page {
  margin: 0;
}

.ivu-page {
  padding-bottom: 150px;
}

.wu.common-box-body .ivu-form-item {
  padding-right: 0;
  margin-bottom: 15px;
}
/* 分页 end */

.iconclass {
  display: inline-block;
  width: 58px;
  background: #fff;
  border: 1px dashed #757f98;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
  height: 58px;
  line-height: 58px;
  vertical-align: middle;
  margin-left: 8px;
  margin-right: 15px;
}
.cropper-wrapper {
  margin-top: 10px;
  height: 400px;
}
.cropper-box {
  height: 300px;
}
.btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c0ccda;
  color: #1f2d3d;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 20px 10px 0px 0px;
  padding: 9px 15px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  background-color: #50bfff;
  border-color: #50bfff;
  transition: all 0.2s ease;
  text-decoration: none;
  user-select: none;
}
.policy-manage {
  position: relative;
  height: 810px;
}

.app-status img {
  display: block;
  width: 100%;
}
.insure-list {
  padding-left: 10px;
  background: url("../../asset/img/app_list_bg.jpg") no-repeat left center;
}
.insure-tag {
  display: inline-block;
  font-size: 12px;
}
.pro-tag {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f4f4f4;
}
.pro-label {
  color: #fd1e1f;
}
.pro-label i {
  font-size: 16px;
  margin-right: 5px;
}
.pro-label-span {
  margin-right: 15px;
}
.app-search {
}
.app-search-left {
  float: left;
  width: 54px;
  text-align: center;
}
.app-search-right {
  margin-left: 54px;
  margin-right: 30px;
}
</style>
<style>
.phoneSlide .ivu-carousel-list {
  /* border-radius: 50px 50px 0 0 !important; */
  overflow: hidden !important;
}
.a-link {
  color: #4074e1;
  text-decoration: underline;
  cursor: pointer;
}
.lunbo .ivu-modal-body {
  padding: 15px 20px 0 20px;
}
.lunbo .ivu-modal-content {
  border-radius: 3px;
}

.shenglue .demo-table-info-column{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

<template>
    <div>
        <Row>
            <i-col span="6" class="phone">
                <div class="phoneBox" >
                  <div class="phonewrap">
                    <div>
                      <div class="liuhai"></div>
                      <div class="app-status">
                        <img src="../../asset/img/status_bar.png" />
                      </div>
                      <div class="app-search">
                        <div class="app-search-left">
                          <img src="../../asset/img/app_company.png" width="28" height="28" />
                        </div>
                        <div class="app-search-right">
                          <Input  disabled placeholder="请输入产品名称"></Input>
                        </div>
                      </div>
                      <div style="border-radius:50px;">                         
                          <div class="hot">
                              <div class="hotList" v-for="item in leftList" :key="item._id">
                                  <Row class="insure-list">
                                      <i-col span="16" class="xianzhong">
                                          <h4>{{item.pname}}</h4>
                                      </i-col>
                                      <i-col span="8" style="text-align:center">
                                        <div class="xianImg text">
                                          <span class="insure-tag bgyellow">推荐</span>
                                          <span class="insure-tag bggreen">最新</span>
                                        </div>                                          
                                      </i-col>
                                  </Row>
                                  <Row class="pro-tag">
                                    <i-col span="12" style="padding-right:5px;" v-for="(sitem,index) in item.attr" :key="index">
                                      <Row>
                                        <i-col span="10">
                                            <div class="content" >
                                              {{sitem.key}}
                                            </div>
                                        </i-col>
                                        <i-col span="14" class="content">
                                            {{sitem.value}}
                                        </i-col>
                                      </Row>
                                    </i-col>    
                                  </Row>
                                  <div class="pro-label">
                                    <span class="pro-label-span" v-for="(sitem,sindex) in item.label" :key="sindex">
                                      <i class="icon iconfont icon-xuanze1"></i>{{sitem}}
                                    </span>
                                  </div>
                              </div>
                          </div>                       
                      </div>
                    </div>
                  </div>  
                </div>
                <div class="phoneBottom">
                  <Row>
                      <i-col span="6" class="center active">首页</i-col>
                      <i-col span="6" class="center">产品</i-col>
                      <i-col span="6" class="center">发现</i-col>
                      <i-col span="6" class="center">我的</i-col>
                  </Row>
                </div>
            </i-col>
            <i-col span="18">
                    <div class="policy-manage">
                        <productTitle></productTitle>
                        <div class="wraper">
                            <Tabs type="card"  :animated="false">
                                <TabPane label="保库险种管理" name="pro">
                                    <div class="pro-con-f common-box-body">
                                        <Row>
                                          <Col span="24" class="table-action" >
                                              <Button v-if="$isShow('app_recomment/create')" type="success" size="large" @click="openProModal" class="fr" icon="plus" >新增保库险种</Button>
                                          </Col>
                                        </Row>
                                    </div>
                                    <div class="detail">
                                        <div class="clearfix">
                                            <div class="table-theme highlight_table shenglue">
                                                <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="columns2" :data="tablepro" class=""></Table>
                                            </div>                        
                                        </div>
                                    </div>
                                </TabPane>
                            </Tabs>                                
                        </div>
                        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
                            <Row class="pro-pagesize">
                                <Col :md="24" :lg="16">
                                    <Button v-if="$isShow('app_recomment/update')" type="primary" :disabled="tableaction"  size="large" class="fl mr10" @click="proUpdate">编辑</Button>
                                    <!-- <Button v-if="$isShow('app_recomment/del')" type="error" :disabled="tableaction"  size="large" class="fl mr10 " @click="proDel">删除</Button> -->
                                    <Button v-if="$isShow('app_recomment/del')&&currentRow.status == 1&&$isShow('app_recomment/putaway')" type="error" :disabled="tableaction"  size="large" class="fl mr10 " @click="proOnline">删除</Button>
                                    <!-- <Button type="success" :disabled="tableaction" size="large" class="fl mr10" v-if="currentRow.status != 1&&$isShow('app_recomment/putaway')" @click="proOnline">上架</Button> -->
                                    <!-- <Button type="warning" :disabled="tableaction"  size="large" class="fl mr10" v-if="currentRow.status == 1&&$isShow('app_recomment/putaway')" @click="proOnline">下架</Button> -->
                                </Col>
                                <Col :md="24" :lg="8" class="tRight">
                                    <Page ref="pages"  :total="listTotal" show-total  :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                                </Col>
                            </Row>
                        </div>                      
                    </div>
            </i-col>
        </Row>
        <Modal v-model="proModal" title="推荐险种" okText="提交" :loading="modalLoading5" @on-ok="proSubmit" @on-cancel="proBack" width="500" :mask-closable = 'false' :closable = "false" class="lunbo">
            <div class="common-box-body wu" >
                <Form :model="proForm" ref="proForm">
                    <Row>
                        <i-col span="24">
                            <!-- <FormItem label="供应商" prop="pcid">
                                <Select :disabled="canEdit" v-model="proForm.pcid" @on-change="changeCid"  placeholder="请选择" transfer filterable> 
                                    <i-option :value="item.cid" :key="item.name" v-for="item in parterList">{{item.name}}</i-option> 
                                </Select>
                            </FormItem> -->
                            <FormItem label="供应商" prop="pcid">
                              <Select v-model="proForm.pcid" :disabled="canEdit" @on-change="changeCid"  placeholder="请选择" transfer filterable>
                                <Option v-for="item in parterList" :value="item.cid.toString()" :key="item.name">{{item.name}}</Option>
                              </Select>
                            </FormItem>
                        </i-col>
                    </Row> 
                    <Row>
                        <i-col span="24">
                            <FormItem label="产品" prop="pid" v-if="canEdit">
                                <Select :disabled="canEdit" v-model="proForm.pid" label-in-value @on-change="pidChange" placeholder="请选择" transfer filterable> 
                                    <i-option :value="item.mongo_id" :key="item.name" v-for="item in recommendProlist">{{item.name}}</i-option> 
                                </Select>
                            </FormItem>
                            <FormItem label="产品" prop="pid" v-else>
                                <Input v-model="proForm.pname" placeholder="请选择" disabled></Input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <!-- <Row>
                        <i-col span="24">
                            <FormItem  label="状态" prop="status">
                                    <Select v-model="proForm.status"  placeholder="请选择状态" transfer>  
                                        <i-option value="1">上架</i-option>               
                                        <i-option value="2">下架</i-option>               
                                    </Select>
                            </FormItem>
                        </i-col>
                    </Row> -->
                    <div>
                      {{aaa}}
                    </div>
                    <Row>     
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[0].key"   placeholder="标题名称"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[0].value"   placeholder="详细参数"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[1].key"   placeholder="标题名称"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[1].value"   placeholder="详细参数"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[2].key"   placeholder="标题名称"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[2].value"   placeholder="详细参数"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[3].key"   placeholder="标题名称"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col span="6" style="padding-right:5px;">
                          <FormItem>
                            <i-input v-model="proForm.attr[3].value"  placeholder="详细参数"></i-input>
                          </FormItem>
                      </i-col>       
                    </Row> 
                    <Row>
                      <Col span="8" style="padding-right:5px;" v-for="(sitem,index) in proForm.label" :key="index">
                          <FormItem>
                            <Input v-model="proForm.label[index]"  placeholder="标签名称"></Input>
                          </FormItem>
                      </Col> 
                    </Row>
                </Form>
            </div>
        </Modal>
    </div>
   
</template>
<script>
import productTitle from "../../components/productTitle";
import { getComlistall } from "../../api/parter";
import { getListByCom } from "../../api/product";
import {
  app_pro_repository_create,
  app_pro_repository_del,
  app_pro_repository_update,
  app_pro_repository_putaway,
  get_detail_new,
  get_list_new
} from "../../api/app_pro_repository";
export default {
  data() {
    return {
      canEdit: false,
      recomtag: 0,
      proModal: false,
      proForm: {
        pcid:'',
        pid:'',
        pname:'',
        status:1,      
        attr: [
          {
            key: "",
            value: ""
          },
          {
            key: "",
            value: ""
          },
          {
            key: "",
            value: ""
          },
          {
            key: "",
            value: ""
          }
        ],
        label: ["", "", ""]
      },
      recProList: [],
      recommendProlist: [],
      parterList: [],
      value1: 1,
      page: 1,
      pagesize: 8,
      listTotal: 0,
      modalLoading5: true,
      loading: true,
      searchForm: {
        p: 1,
        pagesize: 8
      },
      proloading: false,
      tableloading: true,
      tableaction: true,
      currentRow: {},
      columns2: [
        {
          title: "编号",
          type: "index",
          width:80,
          align: "center"
        },
        {
          title: "产品名称",
          key: "pname",
          align: "center",
          width:200,
        },
        {
          title: "说明",
          key: "attr",
          align: "center",
          render:(h,params)=>{
            let _attr = params.row.attr;
            let html = "";
            _attr.forEach(item => {
              html += item.key + ":" + item.value + "   ";
            });
              return h('div',{
                'class': 'demo-table-info-column',
              },html)
          }
        },
        {
          title: "标签",
          key: "label",
          align: "center",
          render:(h,params)=>{
            let _label = params.row.label;
            let html = _label.join("|");
              return h('div',{
                'class': 'demo-table-info-column',
              },html)
          },
        },
        // {
        //   title: "状态",
        //   key: "status",
        //   align: "center",
        //   render: (h, params) => {
        //     return h("div", params.row.status == 1 ? "上架" : "下架");
        //   }
        // },
        {
          title: "创建时间",
          key: "create_timed",
          align: "center",
          width:160,
        },
        {
          title: "操作",
          align: "center",
          width:120,
          render: (h, params) => {
            let that = this;
            return h(
              "a",
              {
                on: {
                  click() {
                    that.$router.push({
                      name: "hb_app_pro_detail",
                      params: { id: params.row._id }
                    });
                  }
                }
              },
              "查看产品详情"
            );
          }
        }
      ],
      tablepro: []
    };
  },
  components: {
    productTitle,
    VueCropper
  },
  computed: {
    slidetoggle() {
      return this.$store.state.sildeshow;
    },
    leftList() {
      let _arry = [];
      this.tablepro.forEach(item => {
        if (item.status == 1) {
          _arry.push(item);
        }
      });
      return _arry;
    }
  },
  mounted() {
    this.getRecomPro();
    this.getAllCom();
  },
  methods: {
    //更新推荐险种
    proUpdate() {
      this.proModal = true;
      this.recomtag = 1;
      this.canEdit = false;
      this.getAllCom();
      this.proForm.pcid= this.currentRow.pcid.toString();
      this.proGetDetail();
    },
    //获取推荐险种详情
    proGetDetail() {
      this.proForm.pid = this.currentRow.pid.toString();
      // let _params = {
      //   pcid: this.currentRow.pcid,
      //   pid: this.currentRow.pid
      // };
      // new Promise((rev,rej)=>{
      //   this.proForm.pcid = this.currentRow.pcid.toString();
      //   rev();
      // }).then(()=>{
      //   this.proForm.pid = this.currentRow.pid.toString()
      // }).catch((error)=>{
      //   rej(error);
      // })
      // new Promise((resolve, reject) => {
      //   get_detail_new(_params)
      //     .then(response => {
      //       if (response.data.err == 0) {
      //         // // this.proForm = response.data.data;
      //         this.proForm.pcid = parseInt(response.data.data.pcid);
      //         this.proForm.attr = response.data.data.attr;
      //         this.proForm.pname = response.data.data.pname;
      //         this.proForm.pcid =parseInt(response.data.data.pcid);

      //         this.proForm.status = response.data.data.status.toString();
      //         this.proForm.pid = response.data.data.pid.toString();
              
      //         if (response.data.data.label.length < 3) {
      //           let _length = 3 - response.data.data.label.length;
      //           if (_length != 0) {
      //             let _arry = new Array();
      //             for(let i=0;i<_length;i++){
      //               _arry.push('');
      //             }
      //             this.proForm.label = response.data.data.label.concat(_arry);
      //           }
      //         }
      //       } else {
      //         this.$Message.error(response.data.info);
      //       }
      //       resolve();
      //     })
      //     .catch(error => {
      //       reject(error);
      //     });
      // });
    },
    proDel() {
      this.$Modal.confirm({
        title: "提示",
        content: "是否要删除该条信息?",
        onOk: () => {
          let _params = {
            id: this.currentRow._id
          };
          new Promise((resolve, reject) => {
            app_pro_repository_del(_params)
              .then(response => {
                if (response.data.err == 0) {
                  // this.getRecomPro();
                  location.reload();
                } else {
                  this.$Message.error(response.data.info);
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
        }
      });
    },
    //上下架
    proOnline() {
      let params = {
        id: this.currentRow._id
      };
      new Promise((resolve, reject) => {
        app_pro_repository_putaway(params)
          .then(response => {
            if (response.data.err == 0) {
              this.getRecomPro();
              this.tableaction = true;
              this.$Message.success(response.data.info);
            } else {
              this.$Message.error(response.data.info);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    pidChange(item) {
      this.aaa+=1;
      if (item.label) {
        this.proForm.pname = item.label;
        let params={
          pcid:this.proForm.pcid,
          pid:this.proForm.pid,
        }
        new Promise((rev, rej) => {
          get_detail_new(params)
            .then(res => {
              if(res.data.err==0){
                //edit  1为编辑   2为新增
                //recomtag   1为编辑  0为新增
                if(res.data.data.edit==2){
                  this.recomtag=0;
                }else if(res.data.data.edit==1){
                  this.recomtag=1
                  // this.proForm.pcid = parseInt(this.proForm.pcid);
                  // this.proForm.pid = response.data.data.pid.toString();
                  this.proForm.status = res.data.data.status.toString();
                  this.proForm.attr = res.data.data.attr;
                  // this.proForm.label = res.data.data.label;
                  // if (res.data.data.label.length < 3) {
                  //   let _length = 3 - res.data.data.label.length;
                  //   if (_length != 0) {
                  //     let _arry = new Array();
                  //     for(let i=0;i<_length;i++){
                  //       _arry.push('');
                  //     }
                  //     this.proForm.label = this.proForm.label.concat(_arry);
                  //   }
                  // }else{
                  //   this.proForm.label = res.data.data.label;
                  // }


                  if (res.data.data.label.length < 3) {
                    let _length = 3 - res.data.data.label.length;
                    if (_length != 0) {
                      let _arry = new Array(_length);
                      this.$set(this.proForm,'label',res.data.data.label.concat(_arry));
                    }
                  }else{
                    this.proForm.label = res.data.data.label;
                  }
                }
              }else{
                if(res.data.err==1201){
                  this.$Message.error('请完善信息');
                }else{
                  this.$Message.error(res.data.info);
                  
                }
              }
              rev();
            })
            .catch(error => {
              rej(error);
            });
        });
      }
    },
    getRecomPro() {
      this.tableloading = true;
      let _params = {
        p: this.page,
        pagesize: this.pagesize
      };
      new Promise((resolve, reject) => {
        get_list_new(_params)
          .then(response => {
            if (response.data.err == 0) {
              this.tablepro = response.data.data.list;
              this.listTotal = response.data.data.total;
            } else {
              this.$Message.error(response.data.info);
            }
            this.tableloading = false;
            resolve();
          })
          .catch(error => {
            reject(error);
          });
        this.tableloading = false;
      });
    },
    getPro(id) {
      if (id) {
        let _params = {
          cid: id
        };
        new Promise((resolve, reject) => {
          getListByCom(_params)
            .then(response => {
              if (response.data.err == 0) {
                this.recommendProlist = response.data.data;
              } else {
                this.$Message.error(response.data.info);
              }
              resolve();
            })
            .catch(error => {
              reject(error);
            });
        });
      }
    },
    //改变供应商
    changeCid(value) {
      this.getPro(value);
    },

    //获取全部供应商
    getAllCom() {
      new Promise((resolve, reject) => {
        getComlistall()
          .then(response => {
            if (response.data.err == 0) {
              this.parterList = response.data.data;
            } else {
              this.$Message.error(response.data.info);
            }
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },
    proSubmit() {
      if (this.recomtag == 0) {
        let _arry = this.proForm.label;
        _arry.forEach((item, index) => {
          if (!item) {
            this.proForm.label.splice(index, 1);
          }
        });
        new Promise((resolve, reject) => {
          app_pro_repository_create(this.proForm)
            .then(response => {
              if (response.data.err == 0) {
                this.$Message.success(response.data.info);
                this.proModal = false;
                this.$refs["proForm"].resetFields();
                this.proForm = {
                  attr: [
                    {
                      key: "",
                      value: ""
                    },
                    {
                      key: "",
                      value: ""
                    },
                    {
                      key: "",
                      value: ""
                    },
                    {
                      key: "",
                      value: ""
                    }
                  ],
                  label: ["", "", ""]
                };
                this.getRecomPro();
                location.reload();
              } else {
                let _this = this;
                if (response.data.err == 1201) {
                  this.$Message.error("请完善信息");
                  setTimeout(() => {
                    _this.modalLoading5 = false;
                    _this.$nextTick(() => {
                      _this.modalLoading5 = true;
                    });
                  }, 2000);
                } else {
                  this.$Message.error(response.data.info);
                  setTimeout(() => {
                    _this.modalLoading5 = false;
                    _this.$nextTick(() => {
                      _this.modalLoading5 = true;
                    });
                  }, 2000);
                }
              }
              resolve();
            })
            .catch(error => {
              reject(error);
            });
        });
      } else {
        this.proForm.id = this.currentRow._id;
        new Promise((resolve, reject) => {
          app_pro_repository_update(this.proForm)
            .then(response => {
              if (response.data.err == 0) {
                this.$Message.success(response.data.info);
                this.proModal = false;
                this.$refs["proForm"].resetFields();
                this.proForm = {
                  attr: [
                    {
                      key: "",
                      value: ""
                    },
                    {
                      key: "",
                      value: ""
                    },
                    {
                      key: "",
                      value: ""
                    },
                    {
                      key: "",
                      value: ""
                    }
                  ],
                  label: ["", "", ""]
                };
                this.getRecomPro();
                location.reload();
              } else {
                this.$Message.error(response.data.info);
                setTimeout(() => {
                  this.modalLoading5 = false;
                }, 2000);
              }
              resolve();
            })
            .catch(error => {
              reject(error);
            });
        });
      }
    },
    proBack() {},
    openProModal() {
      this.canEdit = false;
      this.recomtag = 0;
      this.proModal = true;
      this.proForm = {
        pcid:'',
        pid:'',
        id:'',
        pname:'',
        attr: [
          {
            key: "",
            value: ""
          },
          {
            key: "",
            value: ""
          },
          {
            key: "",
            value: ""
          },
          {
            key: "",
            value: ""
          }
        ],
        label: ["", "", ""]
      };
    },

    tableCurrentChange(currentRow, oldCurrentRow) {
      this.tableaction = false;
      this.currentRow = currentRow;
    },

    // 页码改变
    pageChange(page) {
      this.page = page;
      this.getRecomPro();
    },
    // 每页条数改变
    pageSizeChange(pagesize) {
      this.pagesize = pagesize;
      this.getRecomPro();
    }
  }
};
</script>

